<template>
    <div class="mine-slide">
        <div class="mine-slide-content">
            <div class="positionR mine-slide-cContent">
                <div class="displayFlex">
                    <div class="mine-userheader-wrap">
                        <router-link :to="{path:'/to/user/msg'}">
                            <img class="mine-userheader" :src="mineSlidePage.photo" alt="">
                        </router-link>
                    </div>
                    <div class="mine-username-wrap flex1">
                        <p class="mine-username">{{mineSlidePage.nickName}}</p>
                        <p class="fontSize12" @click="openHKHWConfirm('【好看好玩】中支持更改用户定位')">
                            <span class="iconfont icon-location"></span>
                            <span v-if="mineSlidePage.userLocation">{{mineSlidePage.userLocation}}</span>
                            <span v-else="mineSlidePage.userLocation">定位中</span>
                        </p>
                    </div>
                </div>
                <div class="displayFlex mine-do-witem">
                    <div class="mine-do-item" @click="toUserInfo(mineSlidePage.userId)">
                        <p class="member">{{mineSlidePage.works}}</p>
                        <p>作品</p>
                    </div>
                    <div class="mine-do-item" @click="toUserInfo(mineSlidePage.userId)">
                        <p class="member">{{mineSlidePage.fans}}</p>
                        <p>粉丝</p>
                    </div>
                </div>
                <ul class="mine-list">
                    <!--这两个模块暂时还没有-->
                    <li v-if="false" class="mine-item">
                        <img class="mine-icon-item" src="../../assets/images/user/icon_cup.png" alt="">成就
                    </li>
                    <li v-if="false" class="mine-item">
                        <img class="mine-icon-item" src="../../assets/images/user/icon_record.png" alt="">订单
                    </li>
                    <li class="mine-item">
                        <router-link class="mine-href" to="/to/user/activityRecord">
                            <img class="mine-icon-item" src="../../assets/images/user/icon_set.png" alt="">
                            参与记录
                        </router-link>
                    </li>
                    <li class="mine-item">
                        <router-link class="mine-href" to="/to/user/account/setting">
                            <img class="mine-icon-item" src="../../assets/images/user/icon_set.png" alt="">
                            设置
                        </router-link>
                    </li>
                </ul>
                <!--这里不是不是商户不需要聊天-->
                <!--<div class="concat-im">-->
                    <!--<router-link :to="{path:'/im/chat',query:{storeId:118}}">联系客服</router-link>-->
                <!--</div>-->
            </div>
        </div>

    </div>
</template>

<script>
    export default {
        name: "MineSlide",
        props:{
            mineSlidePageProps:{
                type:Object
            }
        },
        data(){
            return{
                mineSlidePage:{
                    "userId": 0,//被查看人的id
                    "photo": "",//被查看人的用户头像
                    "nickName": "",//被查看人的昵称
                    "works": 0,//被查看人的点赞数量
                    "likeNum": 0,//被查看人的点赞数量
                    "visitNum": 0,//被查看人的访客数量
                    "fans": 0,//被查看人的分丝数
                    "increaseToday": 2,
                    "hadConcernedUser": true,
                    "concernedUserNum": 0,
                    "userLocation":'',
                }
            }
        },
        mounted(){
            this.mineSlidePage = Object.assign({},this.mineSlidePage,this.mineSlidePageProps);
            this.$emit('getUserCity');
            this.$emit("getMineMsg");
        },
        beforeDestroy(){
        },
        components:{
        },
        methods:{
            toUserInfo(userId){
                /*传入被浏览者userId*/
                this.$router.push({path:'/to/user/info',query:{'visitId':userId,self:true}});
            },
        },
        watch:{
            mineSlidePageProps(val){
                this.mineSlidePage = Object.assign({},this.mineSlidePage,val);
            }
        }
    }
</script>

<style scoped lang="scss">
    .mine-slide{
        height: 100%;
        height: 100vh;
        position: fixed;
        top: 0;
        z-index: 1050;
        width: 2.25rem;
    }
    .mine-userheader{
        width: .4rem;
        height: .4rem;
        object-fit: cover;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        border-radius: 50%;
        margin-right: .11rem;
    }

    .mine-username{
        color: #333;
        font-size: .15rem;
        margin-bottom: .05rem;
        max-width: 1.3rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .mine-icon-item{
        width: .15rem;
        position: relative;
        top: 3px;
        margin-right: .1rem;
    }
    .mine-username-wrap{
        color: #333;
        width: 1.8rem;
    }
    .mine-slide-content{
        padding: .5rem .25rem .2rem .2rem;
        width: 2.25rem;
        background-color: #fff;
        position: fixed;
        /*left: 0;*/
        /*top: 0;*/
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 1050;
        height: 100%;
        height: 100vh;
    }
    .icon-location{
        font-size: .14rem;
        color: #333;
    }
    .mine-do-item{
        width: 50%;
        color: #333;
        font-size: .12rem;
        text-align: center;
        .member{
            font-size: .21rem;
            color: #666;
        }
    }
    .mine-do-witem{
        padding-top: .3rem;
    }
    .mine-list{
        padding-top: .18rem;
    }
    .mine-item{
        padding-top: .42rem;
    }
    .mine-href{
        color: #333;
        display: inline-block;
        width: 100%;
    }
    .concat-im{
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: .13rem;
        color: #333333;
        padding-top:.2rem;
        border-top: 1px solid #F0F0F0;
        margin-left: -20px;
        padding-left: 20px;
        box-sizing: border-box;
        width: 2.25rem;
    }
    .mine-slide-cContent{
        height: 100%;
        background-color: #fff;
    }

</style>